<template>
  <div id="main" :style="{width: '700px', height: '600px' , }"></div>
</template>

<script>
import * as echarts from "echarts";

// var myChart = echarts.init(document.getElementById("main"));

export default {
  name: "Home",
  data() {
    return {
      data: [],
      now: new Date(1997, 9, 3),
      oneDay: 24 * 3600 * 1000,
      value: Math.random() * 1000,

      data2: [],
      now2: new Date(1997, 9, 3),
      oneDay2: 24 * 3600 * 1000,
      value2: Math.random() * 1000,

       data3: [],
      now3: new Date(1997, 9, 3),
      oneDay3: 24 * 3600 * 1000,
      value3: Math.random() * 1000,
      
    };
  },

  created() {
    for (var i = 0; i < 1000; i++) {
      this.data.push(this.randomData());
    }

    for (var j = 0; j < 1000; j++) {
      this.data2.push(this.randomData2());
    }

    for (var b = 0; b < 1000; b++) {
      this.data3.push(this.randomData3());
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    randomData() {
      this.now = new Date(+this.now + this.oneDay);
      this.value = this.value + Math.random() * 21 - 10;
      return {
        name: this.now.toString(),
        value: [
          [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join("/"),
          Math.round(this.value)
        ]
      };
    },

    randomData2() {
      this.now2 = new Date(+this.now2 + this.oneDay2);
      this.value2 = this.value2 + Math.random() * 21 - 10;
      return {
        name: this.now2.toString(),
        value: [
          [this.now2.getFullYear(), this.now2.getMonth() + 1, this.now2.getDate()].join("/"),
          Math.round(this.value2)
        ]
      };
    },

     randomData3() {
      this.now3 = new Date(+this.now3 + this.oneDay3);
      this.value3 = this.value3 + Math.random() * 21 - 10;
      return {
        name: this.now3.toString(),
        value: [
          [this.now3.getFullYear(), this.now3.getMonth() + 1, this.now3.getDate()].join("/"),
          Math.round(this.value3)
        ]
      };
    },

    init() {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "Dynamic Data & Time Axis"
        // },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return (
              date.getDate() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getFullYear() +
              " : " +
              params.value[1]
            );
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          },
              axisLine: {

            lineStyle: {
              color: '#273f55'
            }
          },
          axisLabel: {
            // interval: 0, //设置x轴的标签显示可自适应
            show: true,
            textStyle: {
              color: '#8fd5f3'
            }
          },
        },
        yAxis: {
      
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: false
          },
            axisLabel: {
            // margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#8fd5f3'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#56859d'],
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: "第一条",
            type: "line",
            showSymbol: false,
            data: this.data
          },
          {
            name: "第二条",
            type: "line",
            showSymbol: false,
            data: this.data2
          },
            {
            name: "第三条",
            type: "line",
            showSymbol: false,
            data: this.data3
          }
        ]
      });

      setInterval(() => {
        for (var i = 0; i < 5; i++) {
          this.data.shift();
          this.data.push(this.randomData());
        }
        for (var j = 0; j < 5; j++) {
          this.data2.shift();
          this.data2.push(this.randomData2());
        }
        for (var  b = 0; b < 5; b++) {
          this.data3.shift();
          this.data3.push(this.randomData3());
        }
        myChart.setOption({
          series: [
            {
              data: this.data
            },
            {
              data: this.data2
            },
             {
              data: this.data3
            }
          ]
        });
      }, 1000);
    }
  }
};
</script>
